<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/logint.css" />
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
  </head>
  <style>
    .text {
      color: red;
    }
  </style>
  <body>
    <div class="zong">
      <div class="top">
        <ul class="nob1">
          <li><a href="#">波奇网</a></li>
          <li><a href="#">波奇商场</a></li>
          <li><a href="#">宠物百科</a></li>
          <li style="width: 179px"><a href="#">Investor Relations</a></li>
        </ul>
        <ul class="nob2">
          <li class="nb4">
            <a href="#">手机版</a>
            <div class="sn4">
              <img src="../img/tel.jpg" class="tel" />
              <div class="tell">
                <span style="font-size: 15px">波奇宠物APP</span>
                <span style="font-size: 10px">注册领取150，爆款包邮1元起</span>
                <a href="#"><p></p></a>
                <a href="#"><p></p></a>
              </div>
            </div>
          </li>
          <li class="nb3">
            <a href="#">Twitter</a><span class="sp1">|</span
            ><span class="sn3"></span>
          </li>
          <li class="nb2">
            <a href="#">微信</a><span class="sp1">|</span
            ><span class="sn2"></span>
          </li>
          <li class="nb1">
            <a href="#">微博</a><span class="sp1">|</span
            ><span class="sn1"></span>
          </li>
          <li style="text-indent: 20px">
            <a href="zuche.html">注册</a><span class="sp1">|</span>
          </li>
          <li style="text-indent: 20px">
            <a href="login.html">登录</a><span class="sp1">|</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="box">
      <div class="box1">
        <a href="index.html"
          ><img src="../img/logo3.png" alt="log" class="im" /></a
        ><span class="yh">&nbsp;&nbsp;用户注册</span>
        <div class="flyou">
          <span class="lianjie"
            >已有波奇帐号，<a href="login.html">直接登录</a></span
          >
        </div>
      </div>
      <div class="box2">
        <a href="#"><div class="booc"></div></a>
        <a href="#"><h2>手机注册</h2></a>
        <h1></h1>
        <div class="sji">
          <p>
            手机号码：<input
              type="text"
              placeholder="请输入手机号"
            /><span></span>
          </p>
          <p>
            设置密码：<input
              type="password"
              placeholder="6-20大小写英文字母、数字或符号"
            /><span></span>
          </p>
          <p>
            确认密码：<input
              type="password"
              placeholder="请再次输入密码"
            /><span></span>
          </p>
          <p>
            昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<input
              type="text"
              placeholder="请输入昵称"
            /><span></span>
          </p>
          <p>
            验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码&nbsp;：<input
              type="text"
            />
            <a href="#" class="print">换</a>
            <span id="sp5" class="text">123F</span>
          </p>
          <p>
            短信验证码：<input type="text" /><input
              type="button"
              value="获取短信验证码"
            /><span id="sp6"></span>
          </p>

          <p>
            <input type="checkbox" class="yd" />我已阅读并同意<a
              href="#"
              style="color: #3366d6"
              >《波奇网服务协议》</a
            >
          </p>
          <p><input type="button" value="注册" /><span id="sp7"></span></p>
        </div>
      </div>
      <div class="dibu">
        <ul>
          <li><a href="#">关于波奇</a><span>|</span></li>
          <li><a href="#">投资者关系</a><span>|</span></li>
          <li><a href="#">诚聘英才</a><span>|</span></li>
          <li><a href="#">联系我们</a><span>|</span></li>
          <li><a href="#">网站地图</a><span>|</span></li>
          <li><a href="#">意见反馈</a><span>|</span></li>
          <li><a href="#">帮助中心</a><span>|</span></li>
          <li style="width: 170px">客服热线：400-820-6098</li>
        </ul>
        <ul>
          <li><a href="#">沪公网安备 31011502004955号</a><span>|</span></li>
          <li><a href="#">沪ICP备13034501号-2</a><span>|</span></li>
          <li style="width: 160px">增值电信业务经营许可证：</li>
          <li style="width: 130px"><a href="#"> 沪B2-20140120</a></li>
        </ul>
        <p>
          Copyright © 2007- 2021 Boqii.com All Rights Reserved
          光橙（上海）信息科技有限公司 版权所有
        </p>
        <ul>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
        </ul>
        <p>
          违法和不良信息举报电话：<a href="#">021-68826169</a
          >&nbsp;|&nbsp;举报邮箱：<a href="#">zhengls@boqii.com</a>
        </p>
        <p>如网民接到962110电话，请立即接听</p>
      </div>
    </div>
    <script>
      //出现
      let nb1 = document.querySelector(".nb1");
      let nb2 = document.querySelector(".nb2");
      let nb3 = document.querySelector(".nb3");
      let nb4 = document.querySelector(".nb4");
      let sn1 = document.querySelector(".sn1");
      let sn2 = document.querySelector(".sn2");
      let sn3 = document.querySelector(".sn3");
      let sn4 = document.querySelector(".sn4");
      nb1.onmouseover = function () {
        sn1.style.display = "block";
      };
      nb2.onmouseover = function () {
        sn2.style.display = "block";
      };
      nb3.onmouseover = function () {
        sn3.style.display = "block";
      };
      nb4.onmouseover = function () {
        sn4.style.display = "block";
      };
      //消失
      nb1.onmouseout = function () {
        sn1.style.display = "none";
      };
      nb2.onmouseout = function () {
        sn2.style.display = "none";
      };
      nb3.onmouseout = function () {
        sn3.style.display = "none";
      };
      nb4.onmouseout = function () {
        sn4.style.display = "none";
      };
      let inp = document.querySelectorAll("input");
      //1手机号码必须是11位数字
      let pont = false;
      inp[0].onchange = function () {
        var usr = this.value;
        var red =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (red.test(usr)) {
          pont = true;
          this.nextElementSibling.innerHTML = "手机号输入合格";
        } else {
          pont = false;
          this.nextElementSibling.innerHTML = "手机号输入不合格";
        }
      };
      //2)用户密码必须是6~12位字符组成，两次输入密码必须一致
      let pass = false;
      inp[1].onchange = function () {
        var usr = this.value;
        var red = /^[^\u2E80-\u9FFF]{6,12}$/;
        if (red.test(usr)) {
          pass = true;
          this.nextElementSibling.innerHTML = "密码正确";
        } else {
          pass = false;
          this.nextElementSibling.innerHTML = "密码必须是6-12位";
        }
      };
      //3)用户密码必须是6~12位字符组成，两次输入密码必须一致
      let word = false;
      inp[2].onchange = function () {
        var usr = this.value;
        if (usr === inp[1].value) {
          word = true;
          this.nextElementSibling.innerHTML = "密码正确";
        } else {
          word = false;
          this.nextElementSibling.innerHTML = "两次输入密码不一致";
        }
      };
      //3开头必须是字母，长度在6~12位之间
      let user = false;
      inp[3].onchange = function () {
        var usr = this.value;
        var red = /^[a-z0-9]{6,12}$/;
        if (red.test(usr)) {
          user = true;
          this.nextElementSibling.innerHTML = "用户账号正确";
        } else {
          user = false;
          this.nextElementSibling.innerHTML = "请输入正确的密码格式";
        }
      };
      //1-给注册按钮添加事件
      let sp1 = document.querySelectorAll("#sp1");
      let ipts = document.querySelectorAll("input");
      ipts[8].onclick = function () {
        let sj = ipts[0].value;
        let pd = ipts[1].value;
        let uname = ipts[3].value;

        // 请求
        let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
        axios
          .get(regAPI, { params: { username: uname, password: pd, ipong: sj } })
          .then((r) => {
            console.log(r.data);
            alert(r.data.msg);
            if (r.data.code == 1) {
              location.href = "login.html";
            }
          });
      };
      //// 随机验证码
      function random_str(length) {
        var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        ALPHABET += "abcdefghijklmnopqrstuvwxyz";
        ALPHABET += "0123456789";
        var str = "";
        for (var i = 0; i < length; ++i) {
          var rand = Math.floor(Math.random() * ALPHABET.length);
          str += ALPHABET.substring(rand, rand + 1);
        }
        return str;
      }

      $(".print").click(() => {
        let text = random_str(4);
        $(".text").text(text);
      });
    </script>
  </body>
</html>
